/* 公用样式 */
*{
  box-sizing: border-box;
}
/* flex布局 */
.scroll-y{
  overflow-y: scroll;
}
  
  .flex{
    display: flex;
  }
  .flex-1 {
    flex: 1 !important;
  }
  .flex-2 {
    flex: 2;
  }
  .flex-3 {
    flex: 3;
  }
  .flex-4 {
    flex: 4;
  }
  .flex-5 {
    flex: 5;
  }
  .flex-row{
    flex-direction: row !important;
  }
  .flex-column{
    flex-direction: column;
  }
  .flex-wrap{
    flex-wrap: wrap;
  }
  .flex-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
  .align-top{
    vertical-align:top;
  }
  .align-start{
    align-items: flex-start; /*元素位于容器的开头。*/
  }
  .align-end{
    align-items: flex-end; /*元素位于容器底部*/
  }
  .align-center{
     align-items: center; /*垂直居中*/
  }
  .justify-around{
    justify-content: space-around;
  }
  .justify-between{
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-end {
    justify-content: flex-end !important;
  }
  .f-r {
    float: right;
  }
  .f-l {
    float: left;
  }
  /* 文本居中/居左/居右 */
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-middle{
    vertical-align: middle;
  }
  .pad-b-6{
    padding-bottom: 6px;
  }
  .pad-b-10{
    padding-bottom: 10px;
  }
  .pad-l-10{
    padding-left: 10px;
  }
  .mar-l-3{
    margin-left: 3px !important;
  }
  .mar-l-5{
    margin-left: 5px !important;
  }
  .mar-l-6{
    margin-left: 6px !important;
  }
  .mar-l-8 {
    margin-left: 8px !important;
  }
  .mar-l-10 {
    margin-left: 10px !important;
  }
  .mar-l-15 {
    margin-left: 15px !important;
  }
  .mar-l-20 {
    margin-left: 20px !important;
  }
  
  .mar-r-3 {
    margin-right: 3px !important;
  }
  .mar-r-6 {
    margin-right: 6px !important;
  }
  .mar-r-10 {
    margin-right: 10px !important;
  }
  
  .mar-t-3{
    margin-top: 3px !important;
  }
  .mar-t-6{
    margin-top: 6px !important;
  }
  .mar-t-8 {
    margin-top: 8px !important;
  }
  .mar-t-10 {
    margin-top: 10px !important;
  }
  .mar-t-20 {
    margin-top: 20px !important;
  }
  
  .font-bold {
    font-weight: bold;
  }
  
  .fs-8{ font-size: 8px; }
  .fs-9{ font-size: 9px; }
  .fs-10{ font-size: 10px; }
  .fs-11{ font-size: 11px; }
  .fs-12{ font-size: 12px; }
  .fs-13{ font-size: 13px; }
  .fs-14{ font-size: 14px; }
  .fs-15{ font-size: 15px; }
  .fs-16{ font-size: 16px; }
  .fs-18{ font-size: 18px; }
  .fs-20{ font-size: 20px; }
  .fs-22{ font-size: 22px; }
  .fs-24{ font-size: 24px; }
  .fs-30{ font-size: 30px; }
  
  .w-100 {
    width: 100%;
  }
  .h-100 {
    height: 100%;
  }
  
  .red{
    color: #ff5500;
  }
  .c666{
    color: #666;
  }
  
  .noSelect{
    user-select: none;
  }
  
  .dis-block{
    display: block;
  }
  .dis-inline-block{
    display: inline-block;
  }
  
  .pos-rel {
    position: relative;
  }
  
  .pos-abs {
    position: absolute;
  }
  
  .pos-fixed {
    position: fixed;
  }
  
  .hide{
    display: none;
  }
  .over-hid {
    overflow: hidden;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  .ellipsis-text-line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-clamp: 1;
  }